<template>
	<view>
		<view class="toubu">
			<view :class="flxz==0?'xuzn':'weixz'" @click="xuanze(0)">提交申请</view>
			<view :class="flxz==1?'xuzn':'weixz'" @click="xuanze(1)">申请记录</view>
		</view>
		<view class="shenqnr"  v-if="flxz==0">
			<view class="tianxxx">
				<view >请假事由</view>
				<view class="tianxk" @click="dakaixz">
					<view>{{qjshiy}}</view>
					<image  class="xiayib" src="../../static/go.png"></image>
				</view>
				<view class="xiala" v-if="xlak">
					<view  class="shiyo" v-for="item in qjliy" @click="xuanzshix(item)">{{item}}</view>
				</view>
			</view>
			<view class="tianxxx">
				<view >开始时间</view>
				<view class="tianxk">
					<picker mode="date" :value="htkssj"  :start="startDate" :end="endDate" @change="getksriqi">
						<view>{{htkssj}}</view>
					</picker>
					<image  class="xiayib" src="../../static/go.png"></image>
				</view>
			</view>
			<view class="tianxxx">
				<view >收假时间</view>
				<view class="tianxk">
					<picker mode="date" :value="htjssj" :start="startDate" :end="endDate" @change="getjiesriqi">
						<view>{{htjssj}}</view>
					</picker>
					<image  class="xiayib" src="../../static/go.png"></image>
				</view>
			</view>
			<view class="tianxxx">
				<view >请假原因</view>
				<view class="tianxk">
					<textarea class="qjyuanyin" v-model="qjyuany" placeholder="填写请假原因" />
					<!-- <image  class="xiayib" src="../../static/go.png"></image> -->
				</view>
			</view>
			<view class="tianxxx">
				<view >备注</view>
				<view class="tianxk">
					<textarea class="qjyuanyin" v-model="beizhu" placeholder="备注" />
					<!-- <image  class="xiayib" src="../../static/go.png"></image> -->
				</view>
			</view>
			<view class="tjshenq">提交申请</view>
		</view>
		<view class="sqjilu" v-if="flxz==1">
			<view>暂无记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				htkssj: '请选择开始日期',  //合同开始时间
				htjssj: '请选择结束日期',  //合同结束时间
				flxz:0,
				xlak:false,
				qjshiy:'事假',
				qjliy:['事假','病假','调休','年假','产假'],
				qjyuany:'',
				beizhu:''
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 选择开始日期
			getksriqi: function(e) {
				this.htkssj = e.target.value
			},
			// 选择结束日期
			getjiesriqi: function(e) {
				this.htjssj = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				console.log(year)
				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year + 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			xuanze(e){
				this.flxz = e
			},
			dakaixz(){
				this.xlak = !this.xlak
			},
			xuanzshix(item){
				this.qjshiy = item;
				this.dakaixz();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sqjilu{
		width: 710rpx;
		padding: 50rpx 20rpx;
	}
	.shenqnr{
		width: 710rpx;
		padding: 0 20rpx;
		.tjshenq{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 650rpx;
			height: 80rpx;
			background: #007AFF;
			color: #ffffff;
			margin: 30rpx;
		}
		.tianxxx{
			border-bottom: solid 1rpx #c3c3c3;
			margin: 40rpx 0;
			.tianxk{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				font-size: 28rpx;
				.qjyuanyin{
					width: 710rpx;
					height: 100rpx;
					font-size: 28rpx;
				}
				.xiayib{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.xiala{
				position: absolute;
				width: 650rpx;
				padding: 30rpx;
				background: #f5f5f5;
				margin-top: -20rpx;
				z-index: 999;
				.shiyo{
					padding: 10rpx;
				}
			}
		}
	}
	.toubu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		.xuzn{
			font-size: 35rpx;
			font-weight: bold;
			margin-right: 50rpx;
			border-bottom: solid 5rpx #007AFF;
			padding-bottom: 20rpx;
		}
		.weixz{
			font-size: 30rpx;
			// font-weight: bold;
			margin-right: 50rpx;
			// border-bottom: solid 5rpx #007AFF;
			padding-bottom: 25rpx;
			color: #555555;
		}
	}
</style>
